<template>
  <article class="article-wrap">
    <h1 class="article-title text-center">{{articleTitle}}</h1>
    <div class="article-info border-bottom-1px text-center">
      <span class="info-item">{{author}}</span>
      <span class="info-item">{{createDate}}</span>
      <span class="info-item">浏览数：{{browseTimes}}次</span>
    </div>
    <article class="article-content">
        <div v-html="articleContent"></div>
    </article>
    <div class="instructions" v-show="pdf"><a class="donwload-link" v-bind:href="pdf">产品手册<i icon="more" class="icon-donwload"></i></a></div>
  </article>
</template>

<script type="text/ecmascript-6">
    import axios from 'axios';
    import Loading from 'components/loading/loading';
    import baseFun from '../../common/js/base.js';
    import apiUrl from '../../../config/api';
    export default {
    data() {
      return {
          articleTitle: '',
          author: '',
          createDate: '',
          browseTimes: '',
          articleContent: '',
          pdf: 'eeeee'
      }
    },
    methods: {
        _getdata() {
                axios({
                    method:'get',
                    url: apiUrl.productKnowledgeInfoArticle + baseFun.getQueryString('id'),
                    timeout: 5000
                }).then(response => {
                    if (response.data.code === 'SUCCESS') {
                        this.articleTitle = decodeURI(baseFun.getQueryString('title'));
                        document.title = this.articleTitle;
                        this.createDate = decodeURI(baseFun.getQueryString('createDate'));
                        this.browseTimes = decodeURI(baseFun.getQueryString('browseTimes'));
                        this.author = decodeURI(baseFun.getQueryString('author'));
                        this.pdf = decodeURI(baseFun.getQueryString('pdf'));

                        for (var i = 0; i < response.data.data.list.length; i++) {
                            if(!!response.data.data.list[i].content.indexOf('http://')){                                
                                this.articleContent += '<p>' + response.data.data.list[i].content + '</p>';
                            }else {
                                this.articleContent += '<img class="artimg" src="'+response.data.data.list[i].content+'">'
                            }
                        }
                    }
                }).catch(error => {
                        if(error.response){
                          //请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内
                          console.log(error.response.data);
                          console.log(error.response.status);
                          console.log(error.response.header);
                        }else {
                          //一些错误是在设置请求的时候触发
                          console.log('Error',error.message);
                          this.loadingDesc = error.message;
                        }
                });

            },
    },
    created() {
        this._getdata();
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "../../common/less/index";
  .article-wrap{
    background-color:@color-bg-white;
    padding:15px;
    .article-title{font-size:@font-size-large-x;color:@color-text-333;}
    .article-info{
      color:@color-text-999;
      font-size:@font-size-small;
      padding:10px 0;
      margin-bottom:15px;
      .border-bottom-1px(@color-border);
      .info-item{margin:0 8px;}
    }
  }
  .article-content{
    line-height:180%;
    color: @color-text-666;
    p{text-indent: 2em;
      word-wrap:break-word;
    }
    .artimg{max-width:100%;margin: 5px 0;}
  }
  .instructions{
    margin-bottom:20px;
    text-align:right;
    margin-top: 20px;
    .donwload-link{font-size:@font-size-meduim;
      background:@color-bg-grayWhite url("../../module/article/icon-pdf.png") 10px center no-repeat;
      display:inline-block;
      color: @color-text-333;
      font-size:@font-size-meduim;
      padding:10px 10px 10px 30px;
      background-size:14px 16px;
    }
  }
</style>